<template>
  <div>
    <div class="orderDetails" v-if="orderDetails">
      <div class="my-header">
        <i class="back iconfont icon-left" @click="Back"></i>
        <strong>我的订单</strong>
        <i style="min-width: 0.65rem;"></i>
      </div>
      <div class="status">
        <div>
          <p>{{orderDetails.orderStatus|orderStatus}}</p>
          <p class="tips" v-if="orderDetails.orderStatus == 1">{{time}}</p>
          <p class="tips" v-if="orderDetails.orderStatus == 5">{{orderDetails.closeReason}}</p>
          <img src="~assets/common/images/pay.png" alt="">
        </div>
      </div>
      <div class="receiver-info">
        <i class="iconfont icon-address"></i>
        <p>
          <span>收货人：{{orderDetails.receiver}}</span>
          <span style="float:right;" v-if="!orderDetails.orderTel">{{orderDetails.orderPhone}}</span>
          <span style="float:right;" v-if="orderDetails.orderTel">{{orderDetails.orderPhone}},{{orderDetails.orderTel}}</span>
        </p>
        <p>收货地址：{{orderDetails.provinceName}} {{orderDetails.cityName}} {{orderDetails.areaName}}</p>
        <p style="margin-left:61px;">{{orderDetails.orderAddress}}</p>
      </div>
      <div class="wuliu" v-if="orderDetails.orderStatus == 3||orderDetails.orderStatus == 4">
        <i class="iconfont icon-wuliu"></i>
        <!--<img src="~assets/common/images/none-bg.jpg" alt="" class="pos-icon">-->
        <p>物流公司：{{orderDetails.express}}</p>
        <p>运单号：{{orderDetails.expressNumber}}</p>
        <button @click="post(orderDetails.express, orderDetails.expressNumber)">查看物流</button>
      </div>
      <div class="orderGoods">
        <div class="orderIndex">
          <div class="c-title">
            <span>{{orderDetails.supplierWarehouse}}</span>
            <span @click="callSever()">拨打联系商户 <i class="iconfont icon-tel"></i></span>
          </div>
          <div class="c-order" v-for="(item,index) in orderDetails.orderGoodsList" :key="index">
            <div class="order-mid">
              <p>{{item.sellingPoints}}</p>
              <span>货号：{{item.goodsCode}}</span><br>
              <span v-if="!item.sizeAlias">尺码：{{item.goodsSpec}}</span>
              <span v-if="item.sizeAlias">尺码：{{item.goodsSpec}}({{item.sizeAlias}})</span>
            </div>
            <img :src="item.goodsImg" alt="" class="pic">
            <div class="order-right">
              <p>&yen;{{item.goodsDiscountPrice|formatMoney}}</p>
              <span class="count">&yen;{{item.goodsPrice|formatMoney}}</span><br>
              <span>x{{item.goodsNum}}</span>
              <button v-if="item.returnStatus" @click.stop="$router.push({ path: 'refundDetails', query: { returnId: item.returnId }})">{{item.returnStatus|returnStatus}}</button>
            </div>
          </div>
          <div class="price">
            <p>
              <span>商品总价</span>
              <span style="float:right;">&yen;{{orderDetails.orderDiscountTotalMoney|formatMoney}}</span>
            </p>
            <p>
              <span>运费（快递）</span>
              <span style="float:right;">&yen;{{orderDetails.orderFreight|formatMoney}}</span>
            </p>
            <p style="color:#000;font-size:14px;">
              <span>订单总价</span>
              <span style="float:right;">&yen;{{orderDetails.orderPayPrice|formatMoney}}</span>
            </p>
          </div>
          <div class="payPrice">
            <span>实付款</span>
            <span style="float:right;color:red">&yen;{{orderDetails.userPayPrice|formatMoney}}</span>
          </div>
        </div>
        <div class="remark">
          <h3>留言</h3>
          <p>{{orderDetails.orderRemark}}</p>
        </div>
        <div class="orderInfo">
          <p v-if="orderDetails.orderCode">订单编号：{{orderDetails.orderCode}}</p>
          <p v-if="orderDetails.myOrderCode">自定义订单号：{{orderDetails.myOrderCode}}</p>
          <p v-if="orderDetails.payType">支付方式：{{orderDetails.payType|payType}}</p>
          <p v-if="orderDetails.orderPayCode">支付交易号：{{orderDetails.orderPayCode}}</p>
          <p v-if="orderDetails.orderCreateDate">创建时间：{{orderDetails.orderCreateDate|formatDate( 'yyyy-MM-dd hh:mm:ss')}}</p>
          <p v-if="orderDetails.orderPayDate">付款时间：{{orderDetails.orderPayDate|formatDate( 'yyyy-MM-dd hh:mm:ss' )}}</p>
          <p v-if="orderDetails.orderLogisDate">发货时间：{{orderDetails.orderLogisDate|formatDate( 'yyyy-MM-dd hh:mm:ss')}}</p>
          <p v-if="orderDetails.orderRevokeDate">撤销时间：{{orderDetails.orderRevokeDate|formatDate( 'yyyy-MM-dd hh:mm:ss')}}</p>
          <p v-if="orderDetails.orderConfirmDate">交易完成：{{orderDetails.orderConfirmDate|formatDate( 'yyyy-MM-dd hh:mm:ss')}}</p>
        </div>
      </div>
      <div class="orderFoot">
        <div class="btn-box">
          <button v-if="orderDetails.orderStatus == 1" @click="close(orderDetails.orderId)">撤销订单</button>
          <button v-if="showAfterSale" @click="$router.push({ path: 'refundApply', query: { orderId: orderDetails.orderId }})">申请售后</button>
          <button v-if="orderDetails.orderStatus == 3||orderDetails.orderStatus == 4" @click="post(orderDetails.express, orderDetails.expressNumber)">查看物流</button>
          <button class="orange payBtn" v-if="orderDetails.orderStatus == 1" @click="goPay(orderDetails.orderId)">付款</button>
          <button class="orange confirm" v-if="orderDetails.orderStatus == 3" @click="confirm(orderDetails.orderId)">确认收货</button>
          <button v-if="orderDetails.orderStatus == 4||orderDetails.orderStatus == 5" @click="deleteOrder(orderDetails.orderId)">删除订单</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getOrderDetails,
    closeOrder,
    deleteCloseOrder,
    confirmOrder
  } from '@/api/order'
  import {
    mapGetters
  } from 'vuex'
  import {
    MessageBox
  } from 'mint-ui'
  import {
    encryptString,
    setScrollTop
  } from '@/utils'
  export default {
    data() {
      return {
        flag: false,
        time: '',
        orderDetails: {},
        tabid: this.$route.query.tab
      }
    },
    watch: {},
    components: {},
    created() {
      this.fetchData()
      setScrollTop(0)
    },
    filters: {
      payType(val) {
        return val === 0 ? '' : val === 1 ? '微信' : val === 2 ? '支付宝' : val === 3 ? '银联' : val === 4 ? '转账' : val ===
          5 ? '余额' : val === 6 ? '财付通' : '未知'
      },
      orderStatus(val) {
        return val === 0 ? '' : val === 1 ? '等待买家付款' : val === 2 ? '等待仓库发货' : val === 3 ? '等待买家确认收货' : val ===
          4 ? '完成交易' : val === 5 ? '交易关闭' : '未知'
      },
      returnStatus(val) {
        return val === 0 ? '' : val === 1 ? '待审核' : val === 2 ? '等待寄回' : val === 3 ? '已寄回' : val === 4 ? '已确认' : val ===
          5 ? '已拒绝' : val === 6 ? '已撤销' : val === 7 ? '待退款' : val === 8 ? '退款成功' : '未知'
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      }),
      showAfterSale() {
        if (this.orderDetails.orderGoodsList === undefined) return false
        let count = 0
        this.orderDetails.orderGoodsList.forEach(good => {
          if (good.returnStatus !== 0) {
            count++
          }
        })
        const arr = [2, 3, 4]
        if (count !== this.orderDetails.orderGoodsList.length &&
          arr.includes(this.orderDetails.orderStatus)) {
          return true
        }
      }
    },
    methods: {
      Back() {
        this.$router.replace({
          name: 'order',
          query: {
            tab: this.tabid
          }
        })
      },
      // 是否显示申请售后
      fetchData() {
        // 获取订单详情
        const formData = {
          userId: this.userInfo.id,
          orderId: this.$route.query.orderId
        }
        getOrderDetails(formData).then(res => {
          this.orderDetails = res.data.orderDetails
          this.timer(this.orderDetails.secondTime)
        })
      },
      timer(intDiff) {
        const _this = this
        window.setInterval(() => {
          let day = 0
          let hour = 0
          let minute = 0
          let second = 0
          if (intDiff > 0) {
            day = Math.floor(intDiff / (60 * 60 * 24))
            hour = Math.floor(intDiff / (60 * 60)) - (day * 24)
            minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60)
            second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
          }
          if (minute <= 9) minute = '0' + minute
          if (second <= 9) second = '0' + second
          _this.time = day + '天' + hour + '小时' + minute + '分' + second + '秒后自动撤销'
          intDiff--
        }, 1000)
      },
      close(orderId) {
        MessageBox.confirm('确定撤销该订单?').then(action => {
          closeOrder({
            orderId: orderId
          }).then(res => {
            // Toast('订单已撤销')
            // this.orderList = []
            this.fetchData()
          })
        })
      },
      deleteOrder(orderId) {
        MessageBox.confirm('确定删除订单?').then(action => {
          deleteCloseOrder({
            orderId: orderId
          }).then(res => {
            // Toast('订单已删除')
            // this.orderList = []
            this.$router.replace({
              name: 'order',
              query: {
                tab: this.tabid
              }
            })
          })
        })
      },
      post(express, expressNumber) {
        window.location.href = 'https://m.kuaidi100.com/index_all.html?type=' + express + '&postid=' + expressNumber
      },
      confirm(orderId) {
        // 确认收货
        const formData = {
          userId: this.userInfo.id,
          orderId: orderId
        }
        MessageBox.confirm('确认收货?').then(action => {
          confirmOrder(formData).then(res => {
            // Toast('订单已删除')
            // this.orderList = []
            this.fetchData()
          })
        })
      },
      callSever() { // 联系客服
        MessageBox({
          title: '联系客服',
          confirmButtonText: '确定',
          message: '<p>客服电话:<a href="tel://021-50327868">021-50327868</a></p>' +
            '<p>客服QQ: <a href ="http://wpa.qq.com/msgrd?v=3&uin=204316164&site=qq&menu=yes">204316164</a></p>' +
            '<p>客服QQ: <a href ="http://wpa.qq.com/msgrd?v=3&uin=1224652134&site=qq&menu=yes">1224652134</a></p>' +
            '客服工作时间: 9:00—18:00',
          showCancelButton: false
        }).then(action => {})
      },
      goPay(orderid) {
        this.$router.push({
          name: 'pay',
          query: {
            orderid: encryptString(orderid, 1)
          }
        })
      }
    }
  }

</script>
<style lang="scss">
  @import '~assets/common/css/mixin.scss';
  .orderDetails {
    min-height: 100vh;
    margin-top: 45px;
    header {
      height: 45px;
      background-color: $red;
      color: #FFF;
    }
    .status {
      background-color: $red;
      div {
        padding: 30px 10%;
        position: relative;
        p {
          line-height: 36px;
          font-size: 18px;
          color: #FFF;
        }
        .tips {
          min-height: 20px;
          font-size: 12px;
          line-height: 20px;
        }
        img {
          height: 40px;
          position: absolute;
          top: 50%;
          margin-top: -20px;
          right: 5%;
        }
      }
    }
    .receiver-info {
      background-color: #fff;
      padding: 15px 10px 15px 40px;
      position: relative;
      p {
        color: #A1A1A1;
        line-height: 15px;
        margin-bottom: 5px;
      }
      .iconfont {
        position: absolute;
        top: 50%;
        left: 10px;
        margin-top: -11px;
        font-size: 25px;
        color: $blue;
      }
    }
    .wuliu {
      height: 55px;
      background-color: #fff;
      padding: 10px 5% 0 15%;
      position: relative;
      margin-top: 10px;
      p {
        color: #A1A1A1;
        line-height: 15px;
        margin-bottom: 5px;
      }
      .iconfont {
        position: absolute;
        top: 50%;
        left: 10px;
        margin-top: -11px;
        font-size: 25px;
        color: $blue;
      }
      button {
        color: #468EE5;
        width: 64px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 2px;
        border: 1px solid #468EE5;
        background-color: #fff;
        display: inline-block;
        position: absolute;
        top: 50%;
        margin-top: -12px;
        right: 4%;
      }
    }
    .orderGoods {
      padding-bottom: 55px;
      .orderIndex {
        background-color: #fff;
        margin-top: 10px;
        .c-title {
          @include flexbox(space-between,
          center,
          row,
          nowrap);
          padding: 0 10px;
          line-height: 30px;
          .icon-tel {
            color: $blue;
            font-size: 18px;
            position: relative;
            top: 1px;
          }
        }

        .c-order {
          padding: 10px 100px;
          background-color: rgb(252, 252, 252);
          overflow: hidden;
          margin-bottom: 3px;
          .pic {
            position: relative;
            float: left;
            width: 70px; // height: 85px;
            height: auto;
            margin-left: -100%;
            left: -90px;
          }
          .order-mid {
            position: relative;
            float: left;
            width: 100%;
            height: 100%; //   line-height: 25px;
            p {
              @include textoverflow(2);
            }
            span {
              color: $gray;
              margin-top: 8px;
              display: inline-block;
            }
          }
          .order-right {
            text-align: right;
            position: relative;
            vertical-align: top;
            float: right;
            width: 65px;
            height: 100%;
            margin-left: -190px;
            right: -90px;
            line-height: 25px;
            span {
              color: $gray;
              float: right;
            }
            .count {
              text-decoration: line-through;
            }
            button {
              width: 65px;
              height: 25px;
              display: inline-block;
              border: 1px solid #CECECE;
              background-color: #F0F0F0;
              border-radius: 2px;
              margin-top: 15px;
            }
          }
        }
        .price {
          padding: 10px 10px;
          border-bottom: 1px solid #EAEEF1;
          p {
            color: #A1A1A1;
            line-height: 20px;
          }
        }
        .payPrice {
          line-height: 33px;
          padding: 0 10px;
          font-size: 14px;
        }
      }
      .remark {
        background-color: #fff;
        margin-top: 10px;
        padding: 10px 10px;
        h3 {
          font-size: 14px;
          margin-bottom: 10px;
        }
        p {
          color: #A1A1A1;
        }
      }
      .orderInfo {
        padding: 10px;
        color: #A1A1A1;
        line-height: 20px;
        margin-top: 10px;
        background-color: #fff;
      }
    }
    .orderFoot {
      background-color: #fff; // height: 45px;
      position: fixed;
      bottom: 0;
      width: 100%;
      -moz-box-shadow: 0px -2px 1px #EAEEF1;
      -webkit-box-shadow: 0px -2px 1px #EAEEF1;
      box-shadow: 0px -2px 1px #EAEEF1;
      .btn-box {
        text-align: right;
        button {
          width: 65px;
          height: 25px;
          line-height: 25px;
          display: inline-block;
          color: #8B8B8B;
          border: 1px solid #CECECE;
          background-color: #FFF;
          border-radius: 2px;
          margin: 10px 10px 10px 0;
        }
        .orange {
          color: $red;
          border-color: $red;
        }
      }
    }
  }

</style>
